<template>
  <div class="home-recommand">
    <van-row gutter="10" justify="space-around">
      <van-col v-for="item in banners" :key="item" :span="24/banners.length">
        <a :href="item.link">
          <van-image
            round
            fit="cover"
            width="70px"
            height="70px"
             position="right"
            :src="item.image"
          />
          <div class="title">{{item.title}}</div>
        </a>
      </van-col>
    </van-row>
  </div>
</template>

<script>
  export default {
    name: 'homerecommand',
    props: {
      banners: Array
    }
  }
</script>

<style>
  a{
    display: block;
    text-align: center;
    color: #2f2f2f;
    font-family: "microsoft yahei";
    font-size: 24px;
  }
  .home-recommand{
    margin-top: 20px;
    border-bottom:25px solid #ebebeb;
  }
  .title{
    margin-top: 20px;
    margin-bottom: 50px;
  }
</style>
